<template>
    <div class="userContainer">
      <!-- 顶部查询导航 -->
      <div class="header">
          <el-form :inline="true" @submit.native.prevent>

            <el-form-item label="商品名称">
                <!-- 搜索框 -->
                <el-input v-model="page.name" @change="searchUsers" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品类型">
                <el-cascader
                v-model="page.type"
                :options="typeOptions"
                :props="{ checkStrictly: true, emitPath:false }"
                clearable></el-cascader>
            </el-form-item>
              <el-form-item label="商品价格区间">
                <el-input-number v-model="page.priceBegin" :precision="2" :step="0.1" :max="999999999"></el-input-number>
                <el-input-number v-model="page.priceEnd" :precision="2" :step="0.1" :max="999999999"></el-input-number>
              </el-form-item><br>
              <el-form-item label="开始日期">
                <el-date-picker v-model="page.createBegin" type="date" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期">
                <el-date-picker v-model="page.createEnd" type="date" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getDate">查询</el-button>
                
                <el-button type="primary" @click="reset">清空</el-button>
              </el-form-item>
          </el-form>
      </div>
      <div class="search">
          <button v-for="(item,index) in userList" class="searchText" @click="setUserId(item.id,item.name)" >{{ item.name }}</button>
      </div>
      <br>
      <!-- 数据显示 -->
      <div class="content">
          <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="70">
          </el-table-column>
  
          <el-table-column
            label="序号"
            width="100">
            <template slot-scope="scope">{{ (scope.$index+1)+(page.currentPage-1)*page.pageItems }}</template>
          </el-table-column>
  
          <el-table-column
            prop="name"
            label="商品名"
            width="200">
          </el-table-column>
  
          <el-table-column
            label="商品封面"
            width="300">
            <template slot-scope="scope">
              <img class="avatar" :src="scope.row.cover">
            </template>
          </el-table-column>
  
          <el-table-column
            prop="description"
            label="商品描述"
            width="100">
          </el-table-column>
          
          
          <el-table-column
            label="商品类型"
            prop="type"
            width="100">
          </el-table-column>
          
          <el-table-column
            prop="price"
            label="商品价格"
            width="100">
          </el-table-column>

          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- 静态路由跳转,携带id  修改课程-->
              <router-link :to="'/goods/info/'+scope.row.id" 
              style="padding-right: 10px;">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
              </router-link>
               &nbsp;&nbsp; 
              <el-button type="danger" @click="remove(scope.row.id)" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
  
        </el-table>
        <el-button style="float:right" type="danger" @click="removes" plain>批量删除</el-button>
      </div>
  
      <!-- 底部分页导航 -->
      <div class="footer">
          <el-pagination style="magi"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.pageItems"
          layout="total, sizes, prev, pager, next"
          :total="page.total">
          </el-pagination>
      </div>
    </div>
  </template>
  <script>
  import fileStore from '@/api/fileStore';
  import good from '@/api/good';
  import goodType from '@/api/goodType';
  import shop from '@/api/shop'
  import {selectUsersByName} from '@/api/user'
  export default {
      data(){
          return {
              list:{},
              page:{
                  name:'',
                  priceBegin:'',
                  priceEnd:'',
                  type:'',
                  createBegin: null, //创建时间区间
                  createEnd: null,
                  currentPage: 1,
                  pageItems:10, //每页记录条数
                  total:0, 
              },
              userList:'',
              typeOptions:[], //分类列表
          }
      },
      created() {
          //初始化数据
          this.getDate();
      },
      methods: {
        //选择商品
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //查询所有分类
        searchTypes(){
          goodType.getData()
              .then(response=>{
                  var treeData = response.data.list;
                  this.typeOptions = JSON.parse(JSON.stringify(treeData).replace(/id/g,"value"));
              })
        },
        //删除店铺 与 封面
        remove(id){
          this.$confirm('确认删除?')
            .then(_ => {
              good.delete(id)
                .then(response=>{
                      this.$message({
                        message: '删除成功',
                        type: 'success'
                      });
                    this.getDate();
              })
              return;
            })
        },
        //批量删除商品
        removes(){
          if(this.multipleSelection[0] == null){
              this.$message('请先选择要删除的用户');
              return;
          }
          this.$confirm('确认删除?')
            .then(_ => {
              var ids = this.multipleSelection.map(item => item.id);
              good.deletes(ids)
                .then(response=>{
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                    this.getDate();
                })
            })
        },   
        //记录数变动查询
        handleSizeChange(val) {
          this.getDate();
        },
        //页码变动查询
        handleCurrentChange(val) {
          this.getDate();
        },
        //分页查询
        getDate(){
              this.page.priceBegin = parseFloat( this.page.priceBegin);
              this.page.priceEnd = parseFloat( this.page.priceEnd);
            good.page(this.page)
                .then(response=>{
                  this.page.total = response.data.total;
                  this.list = response.data.list;
                })
            this.searchTypes();
        },
        //重置查询条件
        reset(){
          this.page.name='';
          this.page.createBegin=null;
          this.page.createEnd=null;
          this.page.priceBegin=0.0;
          this.page.priceEnd=0.0;
          this.page.type='';
          this.getDate();
        },
      }
  }
  </script>
  <style>
  .userContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .header,
  .content,
  .footer {
    width: 80%;
    padding: 20px;
    align-content: center;
    text-align: center;
  }
  .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  .search{
      position: relative;
      bottom: 10px;
      margin-top: -20px;
      width: 200px;
      /* display: none; */
  }
  .searchText{
      display: block;
      width: 150px;
      height: 20px;
      border: none;
      border-bottom: 1px solid rgb(130, 195, 233);
      outline: none;
  }
  .searchText:hover{
      background-color: rgb(103, 173, 235);
      color: white;
  }
  </style>